<template>
  <!--区域经济健康发展分析-->
  <div class="healthy-development">
    <el-row :gutter="20">
      <el-col span="16">
        <el-row :gutter="20">
          <el-col span="24">
            <!-- <div style="height:66.5vh"> -->
            <div>
              <!--
              <div class="healthy-title">
                <p>重点企业分布</p>
              </div>
              -->
              <div class="healthy-map" style="height:77vh;">
                  <div class="titleCenter">{{companyName}}</div>
                <mapv-block
                  v-if="mapvType=='line'"
                  :polylineList="polylineList"
                  :circleMarkerList="circleMarkerList"
                  @circleClick="circleClick"
                  :center="center"
                  :zoom="zoom"
                />
                <mapvBlockPoint
                  v-if="mapvType=='point'"
                  :pointList="pointList"
                  :circleMarkerList="circleMarkerListpoint"
                  @circleClick="pointClick"
                  @markerClick="pointClick"
                  :center="centerpoint"
                  :zoom="zoompoint"
                />
                <div id="map-pop" v-show="mapPopShow">
                  <p class="map-info-title">{{mapPopData.qymc}}</p>
                  <chart-block
                    v-if="mapPopisShow"
                    :chartID="'chart'+Math.random()"
                    :optionData="mapPopOptionData"
                    chartType="getBarLable"
                    height="15vh"
                    style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%"
                    :isTitle="false"
                    ref="echartsChart"
                  ></chart-block>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col span="8">
        <div style="margin-top: -5.5vh;">
          <normal-block
            chartID="chart1"
            title="本地业务往来"
            chartType="getStackBar"
            height="210"
            style="overflow: hidden;margin-bottom:2vh"
          >
            <template>
              <div class="table">
                <table-block
                  :isPageFull="false"
                  :oprData="localData"
                  :pageSize="localParams.pageSize"
                  :total="localTotal"
                  height="300"
                  @cellClick="localCellClick"
                  @currentChange="localCurrentChange"
                  :currePage="localParams.currePage"
                ></table-block>
              </div>
            </template>
          </normal-block>
          <normal-block
            chartID="chart1"
            title="外地业务往来"
            chartType="getStackBar"
            height="210"
            style="overflow: hidden;margin-bottom:2vh"
          >
            <template>
              <div class="table">
                <table-block
                  :isPageFull="false"
                  :oprData="outerData"
                  :pageSize="outerParams.pageSize"
                  :total="outerTotal"
                  height="300"
                  @cellClick="outerCellClick"
                  @currentChange="outerCurrentChange"
                  :currePage="outerParams.currePage"
                ></table-block>
              </div>
            </template>
          </normal-block>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCommonDataContacts, getCommonData10 } from "@/api/pages.js";
import { getAreaData, getAreaPoint } from "./chongqing";
export default {
  name: "healthy-development",
  components: {
    ContentBlock: () => import('@/components/contentbg-block'),
    ChartBlock: () => import("@/components/chart-block"),
    NormalBlock: () => import("@/components/normal-block"),
    TableBlock: () => import("@/components/table-block"),
    BashiMap: () => import("@/components/map/bashi-map"),
    // MapvBlock: () => import("@/components/mapv-block"),
    MapvBlock: () => import("@/components/map/china-map"),
    mapvBlockPoint: () => import("@/components/mapv-block-point")
  },
  props: {},
  // 重庆长安汽车股份有限公司 106.642792,29.751342

  data() {
    return {
      	tabIndex: Number(this.$route.query.tabIndex) || 0,
			companyName: '',
			companyId: this.$route.query.companyId || 1,
      mapvType: "line",
      center: { lat: 29.751342, lng: 106.642792 },
      zoom: 4,
      centerpoint: {},
      zoompoint: 13,
      pointList: [], // 飞线地图
      circleMarkerList: [
        {
          title: "重庆长安汽车股份有限公司",
          color: "rgba(213, 92, 2,0.9)",
          radius: 7,
          center: [29.751342, 106.642792]
        },
        {
          title: "天津市",
          color: "rgba(213, 92, 2,0.9)",
          radius: 6,
          center: [39.04823, 117.30903]
        },
        {
          title: "河北省保定市",
          color: "rgba(213, 92, 2,0.9)",
          radius: 8,
          center: [38.822763, 115.468255]
        },
        {
          title: "江苏省常州市",
          color: "rgba(213, 92, 2,0.9)",
          radius: 5,
          center: [31.743787, 119.6662]
        },
        {
          title: "江苏省泰州市",
          color: "rgba(213, 92, 2,0.9)",
          radius: 6,
          center: [32.279184, 119.919442]
        },
        {
          title: "江苏省苏州市",
          color: "rgba(213, 92, 2,0.9)",
          radius: 6,
          center: [31.241549, 120.513251]
        },
        {
          title: "湖南省长沙市",
          color: "rgba(213, 92, 2,0.9)",
          radius: 3,
          center: [28.198596, 113.043648]
        },
        {
          title: "广东省佛山市",
          color: "rgba(213, 92, 2,0.9)",
          radius: 5,
          center: [22.767129, 113.335301]
        },
        {
          title: "四川省成都市",
          color: "rgba(213, 92, 2,0.9)",
          radius: 10,
          center: [30.55075, 104.238534]
        },
        {
          title: "四川省成都市",
          color: "rgba(213, 92, 2,0.9)",
          radius: 10,
          center: [30.55075, 104.238534]
        }
      ],
      circleMarkerListpoint: [],
      polylineList: [],
      // 本地
      localParams: {
        pageSize: 8,
        pageIndex: 1,
        currePage: 1
      },
      LocalTotal: 0,
      localData: {
        list: [],
        tableData: []
      },
      // 外地
      outerData: {
        list: [],
        tableData: []
      },
      outerParams: {
        pageSize: 8,
        pageIndex: 1,
        currePage: 1
      },
      outerTotal: 0,

      mapPopShow: false,
      mapPopData: {},
      mapPopOptionData: {
        axis: [],
        data: []
      },
      mapPopisShow: false,
    };
  },
  created() {
    this.initPolylineList();
    // this.circleClick( {title:"四川省成都市",radius:10,center:[30.55075,104.238534]})
  },
  mounted() {
    		this.companyName = sessionStorage.getItem('companyName') + (this.tabIndex === 0 ? '画像' : this.tabIndex === 1 ? '信用评估' : this.tabIndex === 2 ? '商业谱系' : this.tabIndex === 4 ? '业务往来分析' : '')
    this.getCommonDataLocal(
      "N007",
      this.localParams.pageIndex,
      this.localParams.pageSize,
      this.companyId
    );
    this.getCommonDataOuter(
      "N008",
      this.outerParams.pageIndex,
      this.outerParams.pageSize,
      this.companyId
    );
    //this.getMapData()
    document.addEventListener(
      "click",
      () => {
        this.mapPopShow = false;
      },
      true
    );
  },
  methods: {
    initPolylineList() {
      let polylineList = [];
      let circleMarkerList = this.circleMarkerList;
      let pointfrom = circleMarkerList[0].center;
      for (let i = 1; i < circleMarkerList.length; i++) {
        let item = {
          latlngs: [pointfrom, circleMarkerList[i].center],
          color: "rgba(213, 92, 2, 0.55)"
        };
        polylineList.push(item);
      }
      this.polylineList = polylineList;
    },
    pointClick() {
      this.mapvType = "line";
    },
    circleClick(item) {
      console.log("circleClick", item);
      this.centerpoint = item.center;
      // this.circleMarkerListpoint=getAreaData(item.title);
      this.pointList = getAreaPoint(item.title);
      // this.getMapData() // 获取 pointList 数据
      this.mapvType = "point";
    },

    localCellClick(row, column, cell, event) {},
    localCurrentChange(e) {
      this.localParams.currePage = e;
      this.getCommonDataLocal("N007", e, this.localParams.pageSize);
    },
    outerCellClick(row, column, cell, event) {},
    outerCurrentChange(e) {
      this.outerParams.currePage = e;
      this.getCommonDataOuter("N007", e, this.outerParams.pageSize);
    },
    //地图展示（最近一年各个区域的生产总值）
    getMapData() {
      getCommonData10({ busiCode: "N011", comanyId: this.companyId })
        .then(res => {
          if (res.data.code === 200) {
            console.log(JSON.stringify(res.data.data));
            /*
          //this.circleMarkerList
          res.data.data.list.map((item, index) => {
            this.mapData.mapData.push({
              name: item.areaName,
              value: item.sczz
            })
            this.mapData.scatterData.push({
              name: item.areaName,
              value: [item.longtitude, item.latitude, item.sczz]
            })
          })
          let mapDatas =[]
					var lng =0
					var lat =0
					res.data.data.list.forEach((item,index,arr)=>{
						mapDatas.push({
							name:item.qymc,
							lng:item.longtitude,
							lat:item.latitude,
							id:item.qyId,
							sfzdxm:2
						})
						lng+=parseFloat(item.longtitude)/res.data.data.list.length
						lat+=parseFloat(item.latitude)/res.data.data.list.length
					})
					this.pointList=mapDatas
					this.center.lng=lng
					this.center.lat=lat
          */
          }
        })
        .catch(err => {});
    },
    // 本地
    getCommonDataLocal(busiCode, current, size, companyId) {
      getCommonDataContacts(busiCode, current, size, companyId)
        .then(res => {
          if (res.data.code == 200) {
            this.localData.tableData = res.data.data.tableData;
            this.localData.list = res.data.data.list.records;
            this.localTotal = res.data.data.list.total;
          }
        })
        .catch(err => {});
    },
    // 外地
    getCommonDataOuter(busiCode, current, size, companyId) {
      getCommonDataContacts(busiCode, current, size, companyId)
        .then(res => {
          if (res.data.code == 200) {
            this.outerData.tableData = res.data.data.tableData;
            this.outerData.list = res.data.data.list.records;
            this.outerTotal = res.data.data.list.total;
          }
        })
        .catch(err => {});
    },
    //地图marker点击
    markerClick(data) {
      this.mapPopShow = true;
      let labelStyle = document.getElementById("map-pop");
      labelStyle.style.left = data.clientX + 10 + "px"; //单位
      labelStyle.style.top = data.clientY + 20 + "px";
      getCommonData10({ busiCode: "C034", qyId: data.item.id })
        .then(res => {
          if (res.data.code === 200) {
            this.mapPopData = res.data.data.list[0];
            this.mapPopOptionData.axis = ["单位用能", "单位产污", "单位治污"];
            this.mapPopOptionData.data = this.mapPopData;
            this.mapPopisShow = true;
          }
        })
        .catch(err => {});
    }
  },
  watch: {}
};
</script>

<style scoped lang="scss">
.titleCenter{
				width:25vw;
        height: 9vh;
        z-index: 99;
				// height:100%;
        position: absolute;
        top:0;
        left: 50%;
        // transform:translateX(-50%);
        transform: translate(-50%,-50%);
				background: url('../../assets/images/titlebg.png');
				background-size: 100% 100%;
				text-align: center;
				line-height: 9vh;
				font-size: 1.15vw;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #DAF1FF;
			}
.healthy-development {
  width: 100%;
  height: 100%;
  padding: 0 1.3vw;
  padding-top: 7vh;
  padding-bottom: 3vh;
  .healthy-title {
    color: #ffffff;
    text-align: center;
    background: url("../../assets/images/healthy_company_title.png") top center
      no-repeat;
    background-size: 105% 100%;
    margin-top: -3.5vh;
    p {
      height: 12vh;
      line-height: 12vh;
      font-size: 0.85vw;
      font-family: Microsoft YaHei;
    }
  }
  .healthy-map {
    margin: 0 1vw;
    margin-top: -2.5vh;
      position: relative;
  }
  .enterprise-health-rank {
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 1vh;
    }
    .wholesale-trade-title {
      color: #ffffff;
      text-align: center;
      font-size: 0.85vw;
      line-height: 3vh;
      padding: 0 0.5vw;
      font-family: Microsoft YaHei;
      white-space: nowrap;
    }
  }
  .listBox {
    height: 25vh;
    overflow-y: auto;
  }
  #map-pop {
    position: fixed;
    z-index: 1000;
    background: url("../../assets/images/map_pop_border.png") top center
      no-repeat;
    background-size: 100% 100%;
    color: #fff;
    font-size: 0.75vw;
    padding: 2.5vh;
    min-width: 12vw;
    .map-info-title {
      text-align: center;
    }
  }
}
</style>
<style lang="scss">
.healthy-development {
  .el-tabs__nav-wrap:after {
    background: transparent;
  }
  .el-tabs__nav {
    float: none;
    text-align: center;
  }
  .el-tabs--bottom .el-tabs__header.is-bottom {
    margin-bottom: 0;
    margin-top: 0.5vh;
  }
  .el-tabs__item.is-active {
    color: #409eff;
    width: 0.5vw;
    height: 0.8vh;
    background: #35c8fe;
    border-radius: 3px;
  }
  .el-tabs__item {
    color: #409eff;
    width: 0.5vw;
    height: 0.8vh;
    background: rgba(53, 200, 254, 0.5);
    margin: 0.5vh;
    border-radius: 3px;
  }
   th{
    background:transparent !important;
    color:#0CFCFF !important;
    } 
}
</style>
